<template>
  <div id="cesium-container" ref="cesium" />
  <div class="latitudeAndLongitude">
    <p><span>经度:</span> {{ latitudeAndLongitude.longitude }}</p>
    <p><span>纬度:</span> {{ latitudeAndLongitude.latitude }}</p>
  </div>
</template>
<script>
import * as Cesium from "cesium";
import { onMounted, reactive } from "vue";
import { picture } from "@/utils/cesium/index.js";
import { OnClick } from "@/utils/cesium/event.js";
export default {
  name: "homePage",
  setup() {
    const latitudeAndLongitude = reactive({ longitude: "", latitude: "" });
    let viewer = null;
    const imageItem = reactive({
      longitude: "",
      latitude: "",
    });
    onMounted(() => {
      init();
      const title = document.querySelector(".cesium-button.cesium-toolbar-button.cesium-home-button");
      if (!title) return;
      title.title = "初始位置";
    });
    // 初始化
    function init() {
      viewer = reactive(
        new Cesium.Viewer("cesium-container", {
          // imageryProvider: new Cesium.UrlTemplateImageryProvider({
          //   url: "http://127.0.0.1/roadmap/{z}/{x}/{y}.png",
          //   style: "raster",
          //   tileMatrixSetID: "EPSG:4326",
          //   tilingScheme: new Cesium.GeographicTilingScheme(),
          // }),
          // imageryProvider: new Cesium.TileMapServiceImageryProvider({
          //   // url: buildModuleUrl('Assets/Textures/NaturalEarthII')
          //   url: "http://127.0.0.1/roadmap/{z}/{x}/{y}.png",
          //   fileExtension: "jpg",
          // }),
          // 高德地图
          imageryProvider: new Cesium.TileMapServiceImageryProvider({
            // http://127.0.0.1/ditu
            url: `http://${window.location.host}/appmaptile?style=6&x={x}&y={y}&z={z}`, // 地形图
            // url: "http://127.0.0.1/roadmap?style=6&x={x}&y={y}&z={z}`", // 地形图
          }),
          shadows: true,
          baseLayerPicker: false, // 底图组件,选择三维数字底图的底图
          geocoder: false, // 地理编码搜索组件
          animation: false, // 动画小组件
          timeline: false, // 时间轴
          infoBox: false, // 禁用 InfoBox 部件
          selectionIndicator: false, // 禁用 SelectionIndicator 部件
          fullscreenButton: false, // 全屏按钮
          skyAtmosphere: false,
          navigationHelpButton: false,
          contextOptions: {
            webgl: {
              alpha: true,
              depth: true,
              stencil: true,
              antialias: true,
              premultipliedAlpha: true,
              // 实现截图需要设置为true,否则截图为空白
              preserveDrawingBuffer: true,
              failIfMajorPerformanceCaveat: true,
            },
          },
          allowTextureFilterAnisotropic: true,
          vrButton: false, // 隐藏VR按钮，默认false
          // homeButton: false, // 隐藏Home按钮
          sceneModePicker: false, // 隐藏场景模式选择控件
          // selectionIndicator: true, // 显示实体对象选择框，默认true
          scene3DOnly: true, // 每个几何实例将只在3D中呈现，以节省GPU内存
          shouldAnimate: true, // 开启动画自动播放
          sceneMode: 3, // 初始场景模式 1：2D 2：2D循环 3：3D，默认3
          requestRenderMode: true, // 减少Cesium渲染新帧总时间并减少Cesium在应用程序中总体CPU使用率
          // 如场景中的元素没有随仿真时间变化，请考虑将设置maximumRenderTimeChange为较高的值，例如Infinity
          maximumRenderTimeChange: Infinity,
        })
      );
      viewer.scene.debugShowFramesPerSecond = true; // 显示帧FPS
      viewer._cesiumWidget._creditContainer.style.display = "none"; // 去掉logo
      // viewer.scene.mode = Cesium.SceneMode.SCENE3D // sceneMode: this.Cesium.SceneMode.SCENE3D | SCENE2D | COLUMBUS_VIEW
      // 移除默认双击追踪
      viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
      // 限制缩放大小
      // viewer.scene.screenSpaceCameraController.minimumZoomDistance = 100000
      viewer.scene.camera.setView({
        // 默认进入的相机位置
        destination: Cesium.Cartesian3.fromDegrees(120.75, 30.762, 5999999),
      });
      // homeButton 的位置
      viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function (e) {
        e.cancel = true;
        viewer.camera.flyTo({
          destination: Cesium.Cartesian3.fromDegrees(120.75, 30.762, 5999999),
        });
      });
      methodFunction();
    }
    function methodFunction() {
      picture.call(viewer, imageItem);
      OnClick.call(viewer, latitudeAndLongitude);
    }
    return {
      latitudeAndLongitude,
    };
  },
};
</script>
<style lang="less" scope>
#cesium-container {
  height: calc(100vh - var(--top-height_));
}
// 显示经纬度
.latitudeAndLongitude {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 110px;
  height: 60px;
  background: #ffffff4d;
  overflow: hidden;
  p {
    font-size: 12px;
  }
  span {
    user-select: none;
  }
}
</style>
